@extends('admin.app')

@section('content')
    <link rel="stylesheet" href="/css/icon/iconfont-0130.css">
    <link rel="stylesheet" href="/addons/icheck-1.x/skins/square/green.css">
    <script src="/addons/icheck-1.x/icheck.min.js"></script>
    @if($skinid == 3)
        <link rel="stylesheet" href="/css/admin/person-attendance.css?v={{time()}}">
    @elseif($skinid == 1)
        <link rel="stylesheet" href="/css/theme-blue/admin/person-attendance.css?v={{time()}}">
    @elseif($skinid == 2)
        <link rel="stylesheet" href="/css/theme-pink/admin/person-attendance.css?v={{time()}}">
    @endif

    <script src="/js/date.js"></script>
    <script src="/kaohe/js/attendanceCalendar.js"></script>
    <script src="/addons/jquery-weui-build/js/jquery-weui.min.js"></script>
    <script src="/js/moment.js"></script>
    <style>
        .cells_radio .weui-flex__item{
            position: relative;
        }

        input[type="radio"] {
            width: 30px;
            height: 30px;
            opacity: 0;
            vertical-align: middle;
            z-index: 99;
            position: absolute;
            left: 5px;
            top:-5px;
        }
        .label {
            position: absolute;
            left: 14px;
            top: 2px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid #999;
        }
        /*设置选中的input的样式*/
        /* + 是兄弟选择器,获取选中后的label元素*/
        .radio:checked+label {
            background-color: #3BC3CF;
            border: 1px solid #3BC3CF;
        }

        .radio:checked+label::after {
            position: absolute;
            content: "";
            width: 5px;
            height: 10px;
            top: 3px;
            left: 6px;
            border: 2px solid #fff;
            border-top: none;
            border-left: none;
            transform: rotate(45deg)
        }
        .weui-switch, .weui-switch-cp__box{
            width: 44px;
            height: 24px;
            margin-top: 3px;
        }
        .weui-switch-cp__box:before, .weui-switch:before{
            width: 42px;
            height: 22px;
        }
        .weui-switch-cp__box:after, .weui-switch:after{
            width: 20px;
            height: 20px;
        }
        .qw-name{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #000000;
        }
        .weui-picker-modal{
            height: auto;
        }
    </style>
    <div class="mian-container">
        <div class="person-attendance">
            <div class="header-bk">
                <div class="weui-cells">
                  {{--  <a class="weui-cell weui-cell_access" href="javascript:;">
                        <div class="weui-cell__bd">
                            <p>考勤</p>
                        </div>
                        <div class="weui-cell__ft">
                        </div>
                    </a>--}}
                    <div class="weui-cell">
                        <div class="weui-cell__hd"><img src="{{userlogo($user->id)}}"></div>
                        <div class="weui-cell__bd qw-name">
                            {{$user->qw_name}}
                        </div>
                        <div class="weui-cell__ft">
                            <p class="inside-p"><span class="span-round"></span>点击日期编辑出勤状况<span class="span-num"></span></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="calendar-div">
                <div class="div_changeMonth">
                    <span onclick="upMonth()"><i class="icon iconfont icon-left"></i></span>
                    <span id="div_calendar_title" class="div_target_label"></span>
                    <span onclick="nextMonth()"><i class="icon iconfont icon-icon-up-copy-copy"></i></span>
                </div>
                <div id="calendar_div" class="div_calendar">
                </div>
                <div class="list-colorp">
                    <p class="yellow-p"><span class="cir-span"></span>缺勤</p>
                    <p class="blue-p"><span class="cir-span"></span>公假</p>
                    <p class="yellow-p green"><span class="cir-span1"></span>出差</p>
                    <p class="yellow-p other"><span class="cir-span2"></span>其他</p>
                    <p class="green-p"><span class="cir-span"></span>加班</p>
                </div>
            </div>
            <div id="from_container"></div>
        </div>
        <!-- 隐藏考核按钮部分-->
        @if($this_user->getRole()==9)

            @include('sysadmin.admin-caidan')
        @else
            <div class="reful-tabbar">
                <a href="{{url('/user/performance/perf')}}" class="tabbar-item">
                    <p style="line-height: 65px;" class="tabbar-label">返回个人用户界面</p>
                </a>
            </div>

        @endif
    </div>

    <script>
        $('.kaohe-item').click(function(){
            $('.show-hidden').toggle();
        })
        var ac = new AttendanceCalendar("calendar_div", null, "div_calendar_title");
        ac.init();
        ac.setGetDataType(1);
        var model = {
            dValue: 'datetime',
            status: 'status',
            absense: 0,
            normal: 1,
            work:2,
            absense_normal:3,
            work_absense:4,
            work_normal:5,
            normal_work_absense:6
        };

        function upMonth() {
            ac.upMonth();
            ajax_next({{$id}});
            $("#from_container").empty();
        }
        function nextMonth() {
            ac.nextMonth();
            ajax_next({{$id}});
            $("#from_container").empty();

        }
        $('.admin-item').click(function(){
            $('.front-show-hidden').toggle();
        });
        //日志上色
        function getData(ym) {

            var attendances = [];
            for (var i = 0; i < 30; i++) {
                var num = GetRandomNum(0, 2);
                attendances.push({day: i, status: num});
            }
            return attendances;
        }

        //初始化
        function setData(data) {
            $('[href^="tel:"]').removeAttr("href");
            attendances=[];

            for(var item in data) {
                for (var index = 0; index < data[item].length; index++) {
                    attendances.push({datetime: item*1000,status: data[item][index]});
                }

            }

            ac.setAttendance(attendances);
        }

        ac.setModel(model);
        setData({!!$event !!});
        moment().format();
        myclickDate=moment(ac.getCurrentDate(),"MMM DD");
        ac.setClickFn(clickFn);
        function clickFn(clickDate) {
            myclickDate=moment(clickDate)
            ajax_refresh({{$id}});
            $("#from_container").empty();
        }

        $('body').on('click','#leave-absence',function () {
            $(this).picker({
                title: "请选择天数",
                cols: [
                    {
                        textAlign: 'center',
                        values: ['0天','0.5天','1天']
                    }
                ]
            });
        })

        $('body').on('click','#sick-leave',function () {
            $(this).picker({
                title: "请选择天数",
                cols: [
                    {
                        textAlign: 'center',
                        values: ['0天','0.5天','1天']
                    }
                ]
            });
        })

        $('body').on('click','#overtime-work',function () {
            $(this).picker({
                title: "请选择时长",
                cols: [
                    {
                        textAlign: 'center',
                        values: [ '0h','1h', '2h',  '3h', '4h','5h','6h','7h','8h','9h','10h','11h','12h','13h','14h','15h','16h']
                    }
                ]
            });
        })

        $('body').on('click','input.radio',function () {
            var domName = $(this).attr('name');
            var $radio = $(this);
            if ($radio.data('waschecked') == true){
                $radio.prop('checked', false);
                $("input:radio[name='" + domName + "']").data('waschecked',false);
            } else {
                $radio.prop('checked', true);
                $("input:radio[name='" + domName + "']").data('waschecked',false);
                $radio.data('waschecked', true);
            }
        })
        $('body').on('click','.icon-change',function () {
            $(this).parent().next().toggle();
            $(this).toggleClass('icon-cha');
        })
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        function ajax_attendance_update(id) {

            var url='/admin/attendance/'+id;
            var data=$('#attendance, :radio').serializeArray();
                data.push({"name":"time","value":myclickDate.unix()});
            console.log(data);
            console.log(myclickDate.unix());
            var time1 = myclickDate.unix();
            $.ajax({
                type: 'put',
                cache: 'false',
                url: url,
                data: data,
                dataType: 'json',
                success: function (data) {
                    if (data.status == 'success') {
                        $.toast(data.msg,'success');
                        ajax_some(id,time1);
                        //window.location.reload();
                        //console.log(data.redirectUrl);
                        //window.location.href= data.redirectUrl;
                    } else {
                        $.toptip(data.msg,'error');
                    }
                },
                error: function () {
                    $.toptip('网络异常请重试','warning');
                }
            });
        }
        function ajax_refresh(id){
            var url='/admin/attendance/from?id='+id+'&time='+myclickDate.unix();

            $.ajax({
                type: 'get',
                url: url,
                success: function (data) {
                        $("#from_container").html(data);

                },
                error: function () {
                    $.toptip('网络异常请重试','warning');
                    return false;
                }
            });
        }



      //请求上下月
        function ajax_next(id){
            var url='/admin/attendance/check/'+id;
            var time=moment(ac.getCurrentDate()).unix();
            $.ajax({
                type: 'post',
                cache: 'false',
                url: url,
                data:  'time=' + time,
                dataType: 'json',
                success: function (data) {
                    if (data.status == 'success') {
                        $.toptip(data.msg,'success');
                        ac.setAttendance(setData(data.data));
                    } else {
                        $.toptip(data.msg,'error');
                    }
                },
                error: function () {
                    $.toptip('网络异常请重试','warning');
                }
            });
        }
        $(function(){
            $('[href^="tel:"]').removeAttr("href");
            setTimeout(function(){$('[href^="tel:"]').removeAttr("href"); }, 500);
        });

        function ajax_some(id,time1){
            var url='/admin/attendance/check/'+id;
            //var time=moment(ac.getCurrentDate()).unix();
            //var time = time1;
            $.ajax({
                type: 'post',
                cache: 'false',
                url: url,
                data:  'time=' + time1,
                dataType: 'json',
                success: function (data) {
                    if (data.status == 'success') {
                        $.toptip(data.msg,'success');
                        ac.setAttendance(setData(data.data));
                    } else {
                        $.toptip(data.msg,'error');
                    }
                },
                error: function () {
                    $.toptip('网络异常请重试','warning');
                }
            });
        }

    </script>
@endsection